Skip to main content

FR-00.000.Adaptive Web User Interface

#EPIC-00

Для экранов с шириной более 1280px (80rem) разметка интерфейса состоит из двух вертикальных секций на весь доступный экран:

  • Management Section -- в левой части экрана фиксированной ширины 15.625rem (250px) и на всю доступную высоту. При изменении ширины видимой зоны экрана эта секция остаётся неизменной в размере вплоть до 864px (54rem), после чего скрывается полностью в Burger menu. Секция содержит в себе такие блоки:
    • Шапку
    • Блок календаря навигации
    • Блок задач
  • Calendar Section -- в правой части экрана, адаптивно занимая всё оставшееся пространство:
    • Шапка
    • Блок основного календаря
    • Блок командной строка
<div style="display: flex; width: 100%; height: 600px; flex-direction: row;border: 1px solid gray; padding: 5px; gap: 5px">
	<div style="display: flex; flex-direction: column; width: 15.625rem; border: 1px solid purple; padding: 5px; gap: 5px">
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue;">	Management section header </div>
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue;height: 15.625rem;">   Navigation calendar block</div>
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue; flex: 1">   BackLog block </div>
	</div>

	<div style="display: flex; flex-direction: column; flex: 1; border: 1px solid purple; padding: 5px; gap: 5px">
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue;">	Calendar section header </div>
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue; flex: 1;">   Main Calendar block  </div>
		<div style="font-size: 0.7rem; display: flex; border: 1px solid blue;">	Command Line </div>
	</div>
</div>

Main Application Page Layout

  • Адаптивный пользовательский Web-интерфейс состоит из различных компонентов при различной ширине и высоте экрана:
    • W >= 80rem (1280px)
      • Две колонки (слева направо):
        • Блок управления (W = 15.625rem [250px]):
          • Шапка блока (слева направо):
            • Логотип
            • Место для появления индикации загрузки
            • Бургер меню
          • Блок навигационного календаря (WxH : 15.625 x 15.625rem [250x250px])
          • Блок задач (15.625rem x fill)
        • Блок Основной таблицы календаря (W = 1fr):
          • Шапка блока содержит (слева направо):
            • Кнопка + Add new (шрифт и отступы пропорционально уменьшаются)
            • Кнопка [ViewType](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Count](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Scale](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Share](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Print](шрифт и отступы пропорционально уменьшаются)
            • Аватар
    • W >= 64rem (1024px)
      • Две колонки (слева направо):
        • Блок управления (W = 15.625rem [250px]):
          • Шапка блока (слева направо):
            • Логотип
            • Место для появления индикации загрузки
            • Бургер меню
          • Блок навигационного календаря (WxH : 15.625 x 15.625rem [250x250px])
          • Блок задач (15.625rem x fill)
        • Блок Основной таблицы календаря (W = 1fr):
          • Шапка блока содержит (слева направо):
            • Кнопка + Add new (шрифт и отступы пропорционально уменьшаются)
            • Кнопка [ViewType](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Count](шрифт и отступы пропорционально уменьшаются)
            • Кнопка [Scale](шрифт и отступы пропорционально уменьшаются)
            • Аватар
    • W >= 54rem (864px)
      • Одна колонка на всю ширину экрана с отступами (сверху вниз)
        • Шапка приложения содержит (слева направо):
          • Логотип
          • Бургер меню
          • Кнопка + Add new (шрифт и отступы пропорционально уменьшаются)
          • Кнопка [ViewType](шрифт и отступы пропорционально уменьшаются)
          • Кнопка [Count](шрифт и отступы пропорционально уменьшаются)
          • Кнопка [Scale](шрифт и отступы пропорционально уменьшаются)
          • Аватар
        • Основная таблица календаря
        • Всегда отображаемый подвал страницы --- блок командной строки
    • W >= 33rem (528px)
      • Одна колонка на всю ширину экрана с отступами (сверху вниз)
        • Шапка приложения содержит (слева направо):
          • Логотип
          • Бургер меню
          • Кнопка + Add new (шрифт и отступы пропорционально уменьшаются но остаются достаточными для попадания в них пальцем)
          • Аватар
        • Основная таблица календаря
        • Всегда отображаемый подвал страницы --- блок командной строки
    • W >= 20rem (320px)
      • Одна колонка на всю ширину экрана с отступами (сверху вниз)
        • Шапка приложения содержит (слева направо):
          • Логотип
          • Бургер меню
          • Кнопка + Add new (шрифт и отступы пропорционально уменьшаются но остаются достаточными для попадания в них пальцем)
          • Аватар
        • Основная таблица календаря
        • Всегда отображаемый подвал страницы --- блок командной строки
    • H >= 27rem (432px)
      • Командная строка отображается и все её контрольные элементы на месте
    • H < 27rem (432px)
      • isMobile
        • Слишком малая высота экрана не позволит на мобильных устройства комфортно работать с экранной клавиатурой
          • командная строка не отображается на экране мобильного устройства, но может быть вызвана свайпом от нижнего края экрана вверх
          • командная строка может быть закрыта как шевроном в левом нижнем углу, так и свайпом вниз ниж прокрутки
          • долгое удержание пальца на экране на одном месте -- вызов голосового ввода команды
        • Комбинации клавиш являются бессмысленными, зато важны жесты
      • isDesktop
        • Комбинации клавиш продолжают быть актуальными
        • История команд по высоте не более 50vh